import { Component, Vue } from 'vue-property-decorator'
import Styles from './detail.less'
import service from '@/lib/service'
import { applyTypes, formatStatus } from '@/lib/sealFormat'

@Component({})
export default class OrganizationDetail extends Vue {
  // private detailList: any[] = []
  private detailList: any[] = [
    {
      label: '申请类型',
      key: 'applyType',
    },
    {
      label: '所在区域',
      key: 'area',
    },
    {
      label: '上级机构',
      key: 'parentOrgName',
    },
    {
      label: '原机构单位名称',
      key: 'originOrgName',
    },
    {
      label: '机构单位名称',
      key: 'orgName',
    },
    {
      label: '机构类型',
      key: 'orgType',
    },
    {
      label: '证照类型',
      key: 'licenseType',
    },
    {
      label: '证照号码',
      key: 'licenseNumber',
    },
    {
      label: '联系人',
      key: 'applier',
    },
    {
      label: '手机号码',
      key: 'mobile',
    },
  ]
  private detailList2: any[] = [
    {
      label: '机构单位营业执照',
      key: 'fileDownloadUrl',
    },
  ]
  private detailData: any = {
    orgName: '',
    parentOrgName: '',
    orgType: '',
    licenseType: '',
    licenseNumber: '',
    fileDownloadUrl: '',
    operateHistory: [],
  }

  renderDetail() {
    let list: Array<any>
    const add = applyTypes.find(i => i.value === '新增')
    if (
      (add && this.detailData.applyType === add.id) ||
      !this.detailData.originOrgName
    ) {
      list = this.detailList.filter(i => i.key !== 'originOrgName')
    } else {
      list = this.detailList
    }

    return list.map((item: any, i: number) => (
      <li>
        <span class="label">{item.label}</span>
        <span class="inner">{this.formatDetailInner(item.key)}</span>
      </li>
    ))
  }

  protected render() {
    return (
      <div class={Styles.organizationDetailView}>
        <div class="group-item">
          <h1>详情</h1>
          <div class="group-inner">
            <ul class="e-detail-list-com">{this.renderDetail()}</ul>
            <ul class="e-detail-list-com">
              {this.detailList2.map((item: any, i: number) => (
                <li>
                  <span class="label">{item.label}</span>
                  <span class="inner hasImg">
                    <div class="over-layer">
                      <i class="el-icon-search" />
                    </div>
                    <el-image
                      style="width: 160px; height: 160px"
                      src={this.detailData[item.key]}
                      preview-src-list={[this.detailData[item.key]]}
                    />
                  </span>
                </li>
              ))}
            </ul>
          </div>
        </div>

        <div class="group-item">
          <h1>申请信息</h1>
          <div class="group-inner">
            <el-timeline>
              {this.detailData.operateHistory.map((item: any, i: number) => (
                <el-timeline-item timestamp={item.operateTime}>
                  <span class={[{ error: item.operate === 2 }]}>
                    {item.operateName}
                  </span>
                  {item.additionMsg && <span>意见：{item.additionMsg}</span>}
                </el-timeline-item>
              ))}
            </el-timeline>
          </div>
        </div>
      </div>
    )
  }

  private mounted() {
    this.getDetailData()
  }

  // 获取详情信息
  private getDetailData(): void {
    service({
      url: '/seal/rest/organize/newOrganizationApplyDetail',
      method: 'POST',
      body: {
        applyId: this.$route.query.id,
      },
    }).then(res => {
      this.detailData = res.data
    })
  }

  /**
   * 转义文案
   * @param key 字段
   */
  private formatDetailInner(key: any) {
    const obj: any = {
      orgType: {
        1: '单位',
      },
      licenseType: {
        1: '统一社会信用代码证',
      },
    }
    // 如果是 证照类型或机构类型 转义内容
    if (['licenseType', 'orgType'].includes(key)) {
      return obj[key][this.detailData[key]] || '--'
    } else if (['applyType'].includes(key)) {
      return formatStatus(applyTypes, this.detailData[key])
    }

    return this.detailData[key] || '--'
  }
}
